<template>
  <div class="login-page">
    <div class="left-part"></div>
    <div class="right-part">
      <div class="login-pane">
        <!-- tabs组件 -->
        <el-tabs v-model="acitveName" @tab-click="handleClick">
          <el-tab-pane :label="t('login.loginTab')" name="login"> </el-tab-pane>
          <el-tab-pane :label="t('login.signTab')" name="sign"></el-tab-pane>
          <!-- 表单组件 -->

          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item prop="mobile">
              <el-input
                v-model="ruleForm.mobile"
                :placeholder="t('login.placeMobile')"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                :placeholder="t('login.placePass')"
              />
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn" @click="submitForm(ruleFormRef)">{{
                loginText
              }}</el-button>
            </el-form-item>
          </el-form>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import type { FormInstance } from 'element-plus'
import useFormProperties from '@/composables/login/useFormProperties'
import useFormOperates from '@/composables/login/useFormOperates'
const { t } = useI18n()
const router = useRouter()
// 变量
const { ruleFormRef, ruleForm, acitveName, loginText, rules } =
  useFormProperties(t)
// 方法
const { userSign, userLogin } = useFormOperates(router)
const handleClick = (e: any) => {
  const { name } = e.props

  loginText.value = t(`login['${name}Btn']`)
}
handleClick({ props: { name: 'login' } })
// 登录
const submitForm = (formEl: FormInstance) => {
  formEl.validate((valid: any) => {
    if (valid) {
      if (acitveName.value === 'login') {
        userLogin(ruleForm)
      } else {
        userSign(ruleForm)
      }
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/login/index.scss';
</style>
